<script setup lang="ts">
  import { computed } from 'vue'
  import { StrUtil } from '@xtail/core'
  import { CSSWhiteSpace, CSSWordBreak } from '@xtail/ui'
  import { TextEllipsisPropsType } from './types'

  defineOptions({
    name: 'STextEllipsis'
  })

  const props = withDefaults(defineProps<TextEllipsisPropsType>(), {
    webkitBox: true,
    line: 1,
    whiteSpace: CSSWhiteSpace.wrap,
    wordBreak: CSSWordBreak.breakAll,
    className: '',
    style: ''
  })

  const styleComputed = computed(() => {
    if (!props.webkitBox) {
      return (
        StrUtil.isStr(props.style)
          ? `
              ${props.style};
              white-space: nowrap;
              word-break: ${props.wordBreak};
            `
          : {
              ...props.style,
              whiteSpace: 'nowrap',
              wordBreak: props.wordBreak
            }
      ) as string | Record<string, any>
    } else {
      return (
        StrUtil.isStr(props.style)
          ? `
              ${props.style};
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              line-clamp: ${props.line};
              -webkit-line-clamp: ${props.line};
              whiteSpace: ${props.whiteSpace};
              word-break: ${props.wordBreak};
            `
          : {
              ...props.style,
              display: '-webkit-box',
              WebkitBoxOrient: 'vertical',
              MozBoxOrient: 'vertical',
              lineClamp: props.line,
              WebkitLineClamp: props.line,
              whiteSpace: props.whiteSpace,
              wordBreak: props.wordBreak
            }
      ) as string | Record<string, any>
    }
  })
</script>

<template>
  <div class="s-text-ellipsis" :class="className" :style="styleComputed">
    <slot />
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
